<template>
    <div class="subject">
        <p class="subject-content">
            {{ code + 1 }}. {{ subject.content }} &nbsp;&nbsp;&nbsp;<span v-if="isUse">答案:&nbsp;{{ answers[code]
            }}</span>
        </p>
        <div class="flex-box">
            <el-radio v-model="radio" size="medium" :style="{margin:'8px 0'}" :disabled="isUse"
                      v-for="(element,index) in options[code]" :key="index" :index="index"
                      :label="index"
            ><p class="content">
                {{ index }}: &nbsp;&nbsp;{{ element }}
            </p>
            </el-radio>
        </div>
    </div>
</template>

<script>
export default {
    name: "SingleChoiceSubject",
    created() {
        // window.addEventListener("storage", this.initDialog,false);
        // console.log("收到的选项:::", this.options);
    },
    beforeDestroy() {
        // window.removeEventListener("storage", this.initDialog,false);
    },
    props: ["subject", "options", "code", "answers", "isUse"],
    methods: {
        parse(obj) {
            console.log("解析", obj);
            return JSON.parse(obj);
        }
    },
    data() {
        return {
            choice: ["1", "2"],
            radio: "1"
        };
    }
};
</script>

<style scoped lang="scss">
    .subject-content {
        margin: 10px 0;
    }
    
    .subject {
        margin-left: 20px;
        
        .flex-box {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-content: center;
            flex-flow: column;
            padding-left: 20px;
            
            p.content {
                display: inline-block;
                width: max-content;
                overflow-wrap: break-word;
                overflow: hidden;
                font-size: medium;
            }
        }
    }
</style>